<template>
	<div
		class="pubCol"
		v-for="(v, i) in arrData"
		:key="i"
		:id="`n_${v.id}`"
		:class="classes[v.tag]"
		@click="
			(e) => {
				e.stopPropagation()
				handleScroll(v.id)
			}
		"
	>
		<a-tooltip position="top" :content="v.text">
			<span>{{ formatText(v.text, 12) }}</span>
		</a-tooltip>
		<template v-if="!!v.children && !!v.children.length">
			<MapTreeToDom :dir="v.children" />
		</template>
	</div>
</template>

<script setup lang="ts">
import classes from "./index.module.less"
import { type IDirType } from "./index.vue"

const props = defineProps<IDirType>()
const arrData: any = computed(() => {
	return props.dir
})

const formatText = (str: string, maxLen: number) => {
	return str.length > maxLen ? `${str.slice(0, maxLen)}...` : str
}

const handleScroll = (id: string) => {
	console.log(1111);
	
	const child = document.querySelector(`[data-id='${id}'`)
	// 设置高亮
	props.dir.forEach((v) => {
		const child = document.querySelector(`#n_${v.id}`)
		// @ts-ignore
		// child.style.color = "var(--color-text-1)}"
		child.classList.remove("colLink")
		child?.classList.add("pubCol")
	})

	const curIdDom = document.querySelector(`#n_${id}`)

	// @ts-ignore
	// curIdDom.style.color = "#1677ff"
	curIdDom.classList.add("colLink")
	const list = document.getElementsByClassName("arco-tooltip")
	if (list.length > 0) {
		list[list.length - 1].style.display = "none"
	}
	let doc = document.getElementsByClassName('colorBgContainer_pubCol')[0];
	if (doc) {
			doc.scrollTo({
			// @ts-ignore
			top: child?.offsetTop - 10,
			behavior: "smooth",
		})
	}
	window.scrollTo({
		// @ts-ignore
		top: child?.offsetTop - 10,
		behavior: "smooth",
	})
}
</script>

<style scoped></style>

